<template>
  <ul class="list-group">
    <!-- 列表组 -->
    <li
      class="list-group-item d-flex justify-content-between align-items-center"
      :key="item.id"
      v-for="item in list"
    >
      <!-- 复选框 -->
      <div class="custom-control custom-checkbox">
        <input
          type="checkbox"
          class="custom-control-input"
          :id="item.id"
          v-model="item.done"
        />
        <label
          class="custom-control-label"
          :for="item.id"
          :class="item.done ? 'delete' : ''"
          >{{ item.task }}</label
        >
      </div>
      <!-- 徽标 -->
      <span class="badge badge-success badge-pill" v-if="item.done">完成</span>
      <span class="badge badge-warning badge-pill" v-else>未完成</span>
    </li>
  </ul>
</template>

<script>
export default {
  name: 'TodoList',
  props: {
    //   列表数据
    list: {
      type: Array,
      required: true,
      default: [],
    },
  },
};
</script>

<style lang="scss" scoped>
// 为列表设置高度
.list-group {
  max-width: 600px;
  margin: 50px auto;
}

// 删除效果
.delete {
  text-decoration: line-through;
  color: gray;
  font-style: italic;
}
</style>
